<script setup lang="ts">
import { ref, onMounted, computed } from 'vue'
import { getPatientList, addPatient, editPatient, delPatient } from '@/services/user'
import type { PatientList, Patient }from '@/types/user'
import { nameRules, idCardRules } from '@/utils/rules'
import { showConfirmDialog, showSuccessToast, showToast } from 'vant'
import { useRoute, useRouter } from 'vue-router'
import { useConsultStore } from '@/stores'
import type { FormInstance } from 'vant'
//组件挂载完毕获取数据
const list = ref<PatientList>([])
const loadList = async () => {
    const res = await getPatientList()
    list.value = res.data
    //默认选中患者
    if (isChange.value && list.value.length) {
        /* find返回第一个使回调函数返回true的元素，如果找不到符合条件的元素，则返回 undefined */
        const defPatient = list.value.find((item) => item.defaultFlag === 1)
        if (defPatient) patientId.value = defPatient.id
        else patientId.value = list.value[0].id
    }
}
onMounted(() => {
    loadList()
})
const options = [
    {label: '男', value: 1},
    {label: '女', value: 0}
]
//控制popup
const show = ref(false)
const showPopup = (item?: Patient) => {
    if (item) {
        // console.log(item)
        const { id, name, idCard, gender, defaultFlag } = item
        patient.value = { id, name, idCard, gender, defaultFlag }
    } else {
        form.value?.resetValidation()
        patient.value = {...initPatient}
    }
    show.value = true
}
const initPatient: Patient = {
    name: '',
    idCard: '',
    gender: 1,
    defaultFlag: 0
}
const patient = ref<Patient>({...initPatient})
//支持复选框
const defaultFlag = computed({
    get: () => (patient.value.defaultFlag === 1 ? true : false),
    set: (value) => (patient.value.defaultFlag = value ? 1 : 0)
})
//提交进行表单整体校验
const form = ref<FormInstance>()
const onSubmit = async() => {
    //使用validate进行校验
    await form.value?.validate()
    //性别校验，身份证倒数第2位为奇数应该选中男，为偶数，选中女。让倒数第2 位%2，结果为1代表男，结果为0代表女
    const gender = +patient.value.idCard.slice(-2, -1) % 2
    if (gender !== patient.value.gender) {
        await showConfirmDialog({
            title: '温馨提示',
            message: '填写的性别和身份证上的不一致\n您确认提交吗？'
        })
    }
    //正常提交 添加或者编辑
    patient.value.id
      ? await editPatient(patient.value)
      : await addPatient(patient.value)
    //添加成功要做的事：关闭添加患者界面，加载患者列表，成功提示
    show.value = false
    loadList()
    showSuccessToast(patient.value.id ? '编辑成功' : '添加成功')
}
//删除患者
const remove = async() => {
    if (patient.value.id) {
        //确认框，删除请求，关闭，加载，提示
        await showConfirmDialog({
            title: '温馨提示',
            message: `您确认删除${patient.value.name}患者信息`
        })
        await delPatient(patient.value.id)
        show.value = false
        loadList()
        showSuccessToast('删除成功')
    }
}

//兼容选择患者
const route = useRoute()
const isChange = computed(() => route.query.isChange === '1')
//选择效果，定义记录患者的响应式数据，当点击患者时记录id，遍历时判断记录的id跟当前遍历的id是否相同，一样的就加个类名，让盒子变绿实现选中
//记录患者id
const patientId = ref<string>()
//记录患者id的函数，点击时触发
const selectedPatient = (item: Patient) => {
    if (isChange.value) {
        patientId.value = item.id
        // console.log('ceshi')
    }
}
//下一步
const router = useRouter()
const store = useConsultStore()
const next = () => {
    if (!patientId.value) return showToast('请选择患者')
    store.setPatient(patientId.value)
    router.push('/consult/pay')
}
</script>

<template>
    <div class="patient-page">
        <cp-nav-bar :title="isChange ? '选择患者' : '家庭档案'"></cp-nav-bar>
        <!-- 头部选择提示 -->
        <div class="patient-change" v-if="isChange">
            <h3>请选择患者信息</h3>
            <p>以便医生给出更准确的治疗，信息仅医生可见</p>
        </div>

        <div class="patient-list">
            <div 
                class="patient-item" 
                v-for="item in list" 
                :key="item.id"
                @click="selectedPatient(item)"
                :class="{ selected: patientId === item.id }"
                >
                <div class="info">
                    <span class="name">{{ item.name }}</span>
                    <span class="id">{{ item.idCard.replace(/^(.{6}).+(.{4})$/, '$1********$2') }}</span>
                    <span>{{ item.genderValue }}</span>
                    <span>{{ item.age }}岁</span>
                </div>
                <div class="icon" @click.stop="showPopup(item)"><cp-icon name="user-edit"></cp-icon></div>
                <div class="tag" v-if="item.defaultFlag === 1">默认</div>
            </div>
            <div class="patient-add" v-if="list.length < 6" @click="showPopup()">
                <cp-icon name="user-add"></cp-icon>
                <p>添加患者</p>
            </div>
            <div class="patient-tip">最多可添加6人</div>
            <!-- 患者选择下一步 -->
            <div class="patient-next" v-if="isChange" @click="next">
                <van-button type="primary" round block>下一步</van-button>
            </div>

            <!-- 使用popup组件 -->
             <van-popup position="right" v-model:show="show">
                <cp-nav-bar 
                    :title="patient.id ? '编辑患者' : '添加患者'" 
                    right-text="保存" 
                    :back="() => (show = false)"
                    @click-right="onSubmit"
                ></cp-nav-bar>
                <van-form autocomplete="off" ref="form">
                    <van-field 
                        label="真实姓名" 
                        placeholder="请输入真实姓名" 
                        v-model="patient.name"
                        :rules="nameRules"/>
                    <van-field 
                        label="身份证号" 
                        placeholder="请输入身份证号" 
                        v-model="patient.idCard"
                        :rules="idCardRules"/>
                    <van-field label="性别" class="pb4">
                    <!-- 单选按钮组件 -->
                        <template #input>
                            <cp-radio-btn :options="options" v-model="patient.gender"></cp-radio-btn>
                        </template>
                    </van-field>
                    <van-field label="默认就诊人">
                        <template #input>
                            <van-checkbox :icon-size="18" round v-model="defaultFlag"/>
                        </template>
                    </van-field>
                </van-form>
                <!-- 删除按钮 -->
                <van-action-bar v-if="patient.id">
                    <van-action-bar-button 
                        text="删除" 
                        @click="remove" />
                </van-action-bar>
             </van-popup>
              <!-- <cp-radio-btn 
                :options="options" 
                v-model="gender"></cp-radio-btn> -->
        </div>
    </div>
</template>

<style lang="scss" scoped>
.patient-page {
    padding: 46px 0 80px;
    :deep() {
        .van-popup {
            width: 100%;
            height: 100%;
            padding-top: 46px;
            /* 元素的 width 和 height 包含内容、内边距和边框，添加 padding 或 border 不会改变元素的总宽高，而是压缩内容区域 */
            box-sizing: border-box;
        }
    }
}
// 底部操作栏
.van-action-bar {
  padding: 0 10px;
  margin-bottom: 10px;
  .van-button {
    color: var(--cp-price);
    background-color: var(--cp-bg);
  }
}
.patient-list {
    padding: 15px;
}
.patient-item {
    display: flex;
    align-items: center;
    padding: 15px;
    background-color: var(--cp-bg);
    border-radius: 8px;
    margin-bottom: 15px;
    position: relative;
    border: 1px solid var(--cp-bg);
    transition: all 0.3s;
    overflow: hidden;
    .info {
        display: flex;
        flex-wrap: wrap;
        flex: 1;
        span {
            color: var(--cp-tip);
            margin-right: 20px;
            line-height: 30px;
            &.name {
                font-size: 16px;
                color: var(--cp-text1);
                width: 80px;
                margin-right: 0;
            }
            &.id {
                color: var(--cp-text2);
                width: 180px;
            }
        }
    }
    .icon {
        color: var(--cp-tag);
        width: 20px;
        text-align: center;
    }
    .tag {
        position: absolute;
        right: 60px;
        top: 21px;
        width: 30px;
        height: 16px;
        font-size: 10px;
        color: #fff;
        background-color: var(--cp-primary);
        border-radius: 2px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    &.selected {
        border-color: var(--cp-primary);
        background-color: var(--cp-plain);
        .icon {
            color: var(--cp-primary);
        }
    }
}
.patient-add {
    background-color: var(--cp-bg);
    color: var(--cp-primary);
    text-align: center;
    padding: 15px 0;
    border-radius: 8px;
    .cp-icon {
        font-size: 24px;
    }
}
.patient-tip {
    color: var(--cp-tag);
    padding: 12px 0;
}
.pb4 {
    padding-bottom: 4px;
}
.patient-change {
  padding: 15px;
  > h3 {
    font-weight: normal;
    margin-bottom: 5px;
  }
  > p {
    color: var(--cp-text3);
  }
}
.patient-next {
  padding: 15px;
  background-color: #fff;
  position: fixed;
  left: 0;
  bottom: 40px;
  width: 100%;
  height: 80px;
  box-sizing: border-box;
}
</style>